import React, {useEffect,} from 'react'
import {connect,} from 'react-redux'
import {withRouter,} from 'react-router-dom'

// icons
import CrownIcon from "../../../../../../res/images/web/home/crown.png"
// antd-mobile
import {Icon, WingBlank,} from "antd-mobile"
// mock data
// import {starRank,} from "../../../../../../utils/mockdata"
// style sheet
import './Top3Steamers.css'

const Top3Steamers = (props) => {
    const {
        history,
    } = props

    const stars = ([].slice(0, 3).map(s => (
            <div
                key={s.id}
                className='top-steamer-avatar-container'
            >
                <div
                    className='top-steamer-avatar'
                    style={{background: `no-repeat center/cover url(${s.iconUrl})`,}}
                />
                <p className='top-steamer-avatar-name'>{s.name}</p>
            </div>
        )
    ))

    const template = (
        <div
            className='top-steamer-container'
            onClick={() => history.push('./top-star')}
        >
            <div className='top-steamer-crown-icon'>
                <img src={CrownIcon} alt=''/>
                <p style={{paddingLeft: '8px'}}>主播排行榜</p>
            </div>
            <div className='flex-space-around-align-center'>
                {stars}
                <Icon
                    color='#999'
                    type='right'
                    size='xs'
                />
            </div>
        </div>
    )
    return (
        <WingBlank>
            {template}
        </WingBlank>
    )
}

const mapState = state => ({
    isLogin: state.global.isLogin,
    starRankList: state.live.starRankList,
})

const mapDispatch = dispatch => ({
    doFetchStarRankList: (payload) => dispatch.live.doFetchStarRankList(payload),
    doFetchStarRankListNoToken: (payload) => dispatch.live.doFetchStarRankListNoToken(payload),
})

export default connect(mapState, mapDispatch)(withRouter(Top3Steamers))

